<template>
  <div id="header">
    <div class="tt-header">
      <div class="tt-top">
        <div class="left">
          <img src="../assets/images/dingwei.png" alt="" />
          <span>广州城市职业学院</span>
        </div>
        <div class="right">
          <img src="../assets/images/lingdang.png" alt="" />
        </div>
      </div>
      <div class="tt-bottom">
        <div class="tt-left">
          <img src="../assets/images/shaoyishao.png" alt="" />
          <div>扫一扫</div>
        </div>
        <div class="tt-right">
          <img src="../assets/images/fujin.png" alt="" />
          <div>附近设备</div>
        </div>
      </div>
    </div>
    <div class="nav">
      <div class="nav-top">
        <ul class="img">
          <li class="wash">
            <router-link to="myxihong">
              <img src="../assets/images/6.png" alt="" />
              <div class="text">洗烘</div>
            </router-link>
          </li>
          <li class="wash">
            <router-link to="myyingyongshui">
              <img src="../assets/images/7.png" alt="" />
              <div class="text">饮用水</div>
            </router-link>
          </li>
          <li class="wash">
            <router-link to="mylinyu">
              <img src="../assets/images/8.png" alt="" />
              <div class="text">淋浴</div>
            </router-link>
          </li>
          <li class="wash">
           <router-link to="mykongtiao">
              <img src="../assets/images/9.png" alt="" />
              <div class="text">空调</div>
           </router-link>
          </li>
          <li class="wash">
            <router-link to="mychuifeng">
              <img src="../assets/images/10.png" alt="" />
              <div class="text">吹风</div>
            </router-link>
          </li>
        </ul>
      </div>
      <div class="nav-bottom">
        <ul class="tubiao">
          <li>
            <img src="../assets/images/yifu.png" alt="" />
            <div class="nav-text">领洗衣凝珠</div>
          </li>
          <li>
            <img src="../assets/images/huafei.png" alt="" />
            <div class="nav-text">话费充值</div>
          </li>
          <li>
            <img src="../assets/images/jiudian.png" alt="" />
            <div class="nav-text">同城酒店</div>
          </li>
          <li>
            <img src="../assets/images/kajuan.png" alt="" />
            <div class="nav-text">外卖劵</div>
          </li>
          <li>
            <img src="../assets/images/hongbao.png" alt="" />
            <div class="nav-text">红包兑换</div>
          </li>
        </ul>
        <div class="guanggao">
          <mybanner></mybanner>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="content-top">
        <div class="box"></div>
        <div class="content-text">平台推荐</div>
      </div>
      <div class="content-bottom">
        <img src="../assets/images/3.png" alt="" />
        <img src="../assets/images/4.png" alt="" />
      </div>
    </div>
    <div class="watch">
      <div class="watch-top">
        <div class="box1"></div>
        <div class="content-text1">同学们都在看</div>
      </div>
      <div class="watch-bottom">
        <img src="../assets/images/2.png" alt="" />
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>


<script>
import mybanner from "@/components/mybanner.vue";
import myFooter from "@/components/myfooter.vue";
import myxihong from "@/components/myxihong.vue";
import myyingyongshui from "@/components/myyingyongshui.vue";
import mylinyu from "@/components/mylinyu.vue";
import mykongtiao from "@/components/mykongtiao.vue";
import mychuifeng from "@/components/mychuifeng.vue";
import "../assets/fonts/iconfont.css";
export default {
  name: "Home",
  components: {
    myFooter,
    myxihong,
    myyingyongshui,
    mylinyu,
    mykongtiao,
    mychuifeng,
    mybanner
  },
};
</script>


<style lang="scss" scoped>
#header {
  .tt-header {
    background-color: #4542cd;
    padding-bottom: 10px;
    .tt-top {
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      .left {
        padding-left: 10px;
        img {
          width: 15px;
          height: 15px;
        }
        span {
          padding-left: 13px;
          color: #ffffff;
          font-size: 10px;
          display: inline-block;
          height: 20px;
          line-height: 20px;
        }
      }
      .right {
        padding-right: 10px;
        img {
          width: 20px;
          height: 20px;
        }
      }
    }
    .tt-bottom {
      display: flex;
      justify-content: space-between;
      .tt-left {
        margin-left: 80px;
        margin-top: 40px;
        img {
          width: 30px;
          height: 30px;
        }
        div {
          color: #ffffff;
          font-size: 12px;
        }
      }
      .tt-right {
        margin-right: 80px;
        margin-top: 40px;
        img {
          width: 30px;
          height: 30px;
        }
        div {
          color: #ffff;
          margin-left: -8px;
          font-size: 12px;
        }
      }
    }
  }
  .nav {
    .nav-top {
      .img {
        display: flex;
        justify-content: space-around;
        .wash {
          margin-left: -44px;
          list-style: none;
          text-decoration: none;
          img {
              width: 20px;
              height: 20px;
            }
          .text {
            font-size: 12px;
          }
        }
        a {
          text-decoration: none;
        }
      }
    }
    .nav-bottom {
      .tubiao {
        text-align: center;
        list-style: none;
        display: flex;
        margin-left: -15px;
        li {
          margin-left: -13px;
          margin-right: 40px !important;
          img {
            width: 20px;
            height: 20px;
          }
          .nav-text {
            font-size: 10px;
            margin-left: -1px;
            text-align: center;
          }
        }
        li:nth-child(2) {
          img {
            margin-left: -14px !important;
          }
        }
      }
      .guanggao {
        width: 100%;
        height: 150px;
      }
    }
  }
  .content {
    .content-top {
      margin-top: 10px;
      display: flex;
      .box {
        width: 5px;
        height: 20px;
        background-color: blue;
        border-radius: 10px;
        margin-left: 10px;
      }
      .content-text {
        height: 20px;
        font-size: 12px;
        line-height: 20px;
        margin-left: 10px;
      }
    }
    .content-bottom {
      margin-top: 10px;
      display: flex;
      margin-left: 10px;
      img {
        width: 170px;
        height: 100px;
      }
    }
  }
  .watch {
    .watch-top {
      margin-top: 10px;
      display: flex;
      .box1 {
        width: 5px;
        height: 20px;
        background-color: blue;
        border-radius: 10px;
        margin-left: 10px;
      }
      .content-text1 {
        height: 20px;
        font-size: 12px;
        line-height: 20px;
        margin-left: 10px;
      }
    }
    .watch-bottom {
      img {
        width: 100%;
        height: 100px;
      }
    }
  }
  margin-bottom: 80px;
}
</style>